<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
    <!--先导入boostrap.min.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--jquery-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!--boostrap的js库-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!--

            boostrap表格样式:
                    class="table" 基本表格样式

                    条纹状表格
                    class = "table-striped"
                    带边框的表格
                    class = "table-bordered"
                    鼠标悬停:有一种标记
                   class="table-hover"
                   紧缩表格
                   class = "table-condensed"

                   单元格 td的样式属性
                   状态类
                    class="active/danager/info/.."
    -->
<table class="table table-striped table-bordered table-hover table-condensed" >
    <tr>
        <th>编号</th>
        <th>网名</th>
        <th>用户密码</th>
        <th>真实姓名</th>
        <th>邮箱</th>
        <th>手机号</th>
        <th>性别</th>
    </tr>
    <tr class="info">
        <td >1</td>
        <td>天地一线</td>
        <td>123456</td>
        <td>高圆圆</td>
        <td>gaoyuanyuan@163.com</td>
        <td>13388889999</td>
        <td>女</td>
    </tr>
    <tr class="info">
        <td>2</td>
        <td>天地一线2</td>
        <td>1234567</td>
        <td>高圆圆2</td>
        <td>gaoyuanyuan@qq.com</td>
        <td>13388889999</td>
        <td>女</td>
    </tr>
    <tr class="info">
        <td>3</td>
        <td>天地一线</td>
        <td>123456</td>
        <td>高圆圆</td>
        <td>gaoyuanyuan@163.com</td>
        <td>13388889999</td>
        <td>女</td>
    </tr>

</table>
</body>
</html>